*{margin:0;padding:0}

html,body,.flow{
  height:100%;
  font-size: 14px;
  user-select: none;
}

/*layout*/
.flow-header{
  width:100%;
  height: 40px;
  background: #1f88d6;
  border-top: 1px solid #e0e0e0;
  border-bottom: 1px solid #e0e0e0;
  -webkit-box-shadow: 0 2px 0px #bbb;
  box-shadow: 0 2px 0px #bbb; 
  font-size: 12px;
  color:#ffffff;
  padding: 0 30px;
  box-sizing: border-box;
  display: flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
  position: fixed;
  top:0;
  left:0;
  z-index: 1000000000;
}
.flow-body{
  width:100%;
  height:100%;
  /*padding-top:40px;*/
  box-sizing: border-box;
}
.flow-menu{
  float: left;
  width:110px;
  height:100%;
  min-width:100px;
  min-height: 400px;
  background: whiteSmoke;
  /*padding-top:20px;*/
  box-sizing: border-box;
  border-right: 1px solid #ddd;
  overflow: auto;
  -webkit-box-shadow: -1px 0px 5px #bbb inset;
  box-shadow: -1px 0px 5px #bbb inset;    
}
.flow-container{
  height: 100%;
  min-height: 400px;
  overflow: auto;
  background-color: #f2f2f2;  
}
.flow-main{
  width:3000px;
  height:3000px;
  background-image: url('../images/bg1.png');
  background-repeat: repeat;
  position: relative;
  border: 1px solid #ddd;
}
/*header*/
.flow-title{
  font-size: 14px;
  font-weight: 700;
}
.btn{
  padding:3px 12px;
}
.btn-default{
  color:#1f88d6;
}
.btn-default:link,.btn-default:visited,.btn-default:hover,.btn-default:active,.btn-default:focus {
  color: #1f88d6;
  background-color: #fdfdfd;
  border-color: #adadad;
}

/*左侧菜单*/
.flow-menu>h5{
  width:96%;
  height:30px;
  line-height: 30px;
  background: #eeeeee;
  text-indent: 20px;
  font-size: 12px;
}
.flow-btns{
  padding-left: 20px;
  padding-top: 5px;
}
.flow-btn{
  width:60px;
  height:30px;
  border:1px solid #aaaaaa;
  background-color: #fafb16;
  margin-bottom: 5px;
}

.flow-btns .btn-base{
  border-radius: 0;
}
.flow-btns .btn-flow{
  border-radius: 5px;
}
.flow-btns .btn-node{
  border-radius: 15px;
}
.flow-btns .btn-judge{
  border-radius: 50%;
}


.node-common{
  width: 160px;
  min-height:40px;
  padding:8px 12px;
  /*box-sizing: border-box;*/
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color:#1a1a1a;
  border:0.5px solid #b0ab73;
  background-color: #fafb16;
  position: absolute;
  cursor: default;
  overflow: hidden;  
}
.flow-main .node-base{
  border-radius: 0;
}
.flow-main .node-flow{
  border-radius: 5px;
}
.flow-main .node-node{
  border-radius: 18px;
}
.flow-main .node-judge{
  border-radius: 50%;
}
.flow-main .node-focus{
  border-color: #409eff;
}

.flow-input{
  width:100%;
  height: 100%;
  position:absolute;
  left:0;
  top:0;
  z-index: 100;

}
.hide-input{
  position:absolute;
  left:0;
  top:-27px;
}

.line-label{
  width: 80px;
  min-height:40px;
  padding:8px 12px;
  font-size: 12px;
  text-align: center;
  line-height: 20px;
  color:#1a1a1a;
  background-color: #ffffff;
  position: absolute;
  z-index: 2000000;
  cursor: default;
  overflow: hidden;
}
.flow-main .label-focus{
  border:1px solid #409eff;
}
.flow-main .label-blur{
  border:none;
}
.label-input{
  width:100%;
  height: 100%;
  position:absolute;
  left:0;
  top:0;
  z-index:2000100;
}

